<template>
  <div>
    <el-form label-width="120px">
      <el-form-item label="信息描述">
        <el-tag type="info">excel模版说明</el-tag>
        <el-tag>
          <i class="el-icon-download"/>
          <a :href="defaultExcelTemplate">点击下载模版</a>
        </el-tag>

      </el-form-item>

      <el-form-item label="选择Excel">
        <el-upload
          ref="upload"
          :auto-upload="false"
          :on-exceed="fileUploadExceed"
          :on-success="fileUploadSuccess"
          :on-error="fileUploadError"
          :limit="1"
          :action="uploadPath"
          name="file"
          accept="application/vnd.ms-excel">
          <el-button
            slot="trigger"
            size="small"
            type="primary">选取文件</el-button>
          <el-button
            :disabled="importBtnDisabled"
            style="margin-left: 10px;"
            size="small"
            type="success"
            @click="submitUpload()">导入</el-button>
        </el-upload>
      </el-form-item>
    </el-form>
  </div>
</template>
<script>
export default {
  data() {
    return {
      importBtnDisabled: false,
      uploadPath: 'http://127.0.0.1:8110/admin/edu/subject/import',
      defaultExcelTemplate: 'https://zsyal-guli.oss-cn-shanghai.aliyuncs.com/excel/2021/08/02/4ac6e762706944aa947bfae649313c41.xls'
    }
  },
  methods: {
    // 上面limit定义只能上传一个文件 多个就走下面这个
    fileUploadExceed() {
      this.$message.warning('只能选取一个文件')
    },
    fileUploadSuccess(res) {
      this.$message.success('文件上传成功')
      this.importBtnDisabled = false
    },
    fileUploadError(e) {
      this.$message.error('文件上传失败')
    },
    // 上传
    submitUpload() {
      if (this.importBtnDisabled) { // 按钮禁用
        this.$message.warning('请勿重复上传')
        return
      }
      this.importBtnDisabled = true
      // 调用上传组件的上传方法上传excel文件
      // 在vue渲染的范围内 获取一个标签对象：只要给标签定义ref属性值，然后通过this.$refs可以获取到vue对象中所有的有ref值的标签集合
      // 再通过this.$refs.ref值  可以获取到指定标签
      this.$refs.upload.submit()
    }
  }
}
</script>
